<template>
  <div class="cost-price">
    <el-select v-model="costType" class="select" size="small" clearable placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"/>
    </el-select>
    <el-input
      v-model="modelData"
      :placeholder="costType===1?'请输入飞博分成比例':'请输入金额'"
      :disabled="!costType && costType !== 0"
      type="number"
      class="input"
      style="font-size: 13px;"
      size="small"
      clearable>
      <div slot="append" class="autocomplete-append input-percentage-append">{{ costType===1?'%':'元' }}</div>
    </el-input>
  </div>
</template>
<script>
export default {
  model: {
    prop: 'paramsObj',
    event: 'changeVal'
  },
  props: {
    paramsObj: {
      type: Object,
      default: () => {
        return {};
      }
    },
    item: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      options: [
        { value: 0, label: '固定价格' },
        { value: 1, label: '利润分成' }
      ]
    };
  },
  computed: {
    costType: {
      get() {
        const key = this.item.keyword || this.item.key;
        if (!this.paramsObj[key] || !this.isNumber(this.paramsObj[key].costType)) return '';
        return this.paramsObj[key].costType;
      },
      set(costType) {
        const key = this.item.keyword || this.item.key;
        const value = this.paramsObj[key] ? this.paramsObj[key].value : '';
        if (this.isNumber(costType) || value) {
          const ans = { key, isCost: true, costType, value };
          if (this.item.newOptions) ans.newOptions = true;
          this.$set(this.paramsObj, key, ans);
        } else {
          this.$set(this.paramsObj, key, {});
          delete this.paramsObj[key];
        }
        this.$emit('changeVal', this.paramsObj);
      }
    },
    modelData: {
      get() {
        const key = this.item.keyword || this.item.key;
        if (!this.paramsObj[key] || !this.paramsObj[key].value) return '';
        return this.paramsObj[key].value;
      },
      set(value) {
        const key = this.item.keyword || this.item.key;
        const costType = this.paramsObj[key] ? this.paramsObj[key].costType : '';
        if (this.isNumber(costType) || value) {
          const ans = { key, isCost: true, costType, value };
          if (this.item.newOptions) ans.newOptions = true;
          this.$set(this.paramsObj, key, ans);
        } else {
          this.$set(this.paramsObj, key, {});
          delete this.paramsObj[key];
        }
        this.$emit('changeVal', this.paramsObj);
      }
    }
  },
  methods: {
    isNumber(num) {
      return num || num === 0;
    }
  }
};
</script>
<style lang="scss" scoped>
.cost-price {
  display: flex;
  &::v-deep {
    .select {
      width: 100px;
      .el-input__inner {
        border-right: none;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-color: #DCDFE6 !important;
      }
    }
    .input {
      width: 140px;
      position: relative;
      .el-input__inner {
        padding-right: 25px;
        width: 140px !important;
        border-radius: 0 4px 4px 0;
      }
      .el-input__suffix {
        right: 15px;
      }
      .el-input-group__append {
        padding: 0;
        background-color: transparent;
        border: none;
        border-radius: 0;
      }
    }
  }
}

.autocomplete-append {
  display: flex;
  align-items: center;
  height: 100%;
  position: absolute;
  right: 5px;
  top: 0;
}
.input-percentage-append {
  font-size: 14px;
  color: #333;
}
</style>
